<template>
    <div class="res_warp">
        <div class="res_con">
            <div class="rheads">
                <div class="rlogo" @click="index">康</div>
                <div class="sun">
                    <img src="../../../../assets/images/sun.gif"/>
                </div>
                <h4>注册账号</h4>
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                   
                    <!-- <el-upload
                        class="avatar-uploader"
                         action="https://jsonplaceholder.typicode.com/posts/"
                        multiple
                        :limit="1"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload> -->
                   <el-form-item label="用户名" prop="uname">
                    <el-input v-model="ruleForm.uname"></el-input>
                    </el-form-item>
                    <el-form-item
                        prop="uemail"
                        label="邮箱">
                    <el-input v-model="ruleForm.uemail"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号" prop="uphone">
                        <el-input v-model.number="ruleForm.uphone"/>
                    </el-form-item>

                    <el-form-item label="密码" prop="upass">
                    <el-input type="password" v-model="ruleForm.upass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkuPass">
                    <el-input type="password" v-model="ruleForm.checkuPass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="年龄" prop="uage">
                    <el-input v-model.number="ruleForm.uage"></el-input>
                </el-form-item>  
                <el-form-item label="性别" prop="usex">
               <el-select v-model="usex" placeholder="请选择">
                  
    <el-option
      v-for="item in options"
      :key="item.usex"
      :label="item.label"
      :value="item.usex">
    </el-option>
  </el-select>
  </el-form-item>
                   <div class="remeber1">
   <label>
                    <input type="checkbox" v-model="userinfo" @click="repwd"/><span @click="read">我已阅读并同意<i>《小康众筹用户注册协议》</i></span>
                    <div class="show-box">
                    </div>
                    <div class="gou" v-show="hidd" ></div>
                </label>
                   </div>
    <div class="resbtn"><button type="submit" @click.prevent="rres">注册</button></div> 
                <div class="resbtn"><button type="reset">重置</button></div>
                </el-form>
                <div class="nnn"><i @click="llog"> 已有账号？在此点击登陆</i></div>
                 <transition
         leave-active-class="animated fadeOutDown">
            <span class="jieguo" v-if="!xianshi" >
                {{jieguo}}
                </span></transition>
                
                
            </div>
        </div>

    </div>
</template>

<script>
export default {
data () {
     var checkAge = (rule, value, callback) => {
        if (!value) {
            this.ustatus=false;
          return callback(new Error('年龄不能为空'));
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
              this.ustatus=false;
            callback(new Error('请输入数字值'));
          } else {
            if (value < 16) {
                this.ustatus=false;
              callback(new Error('必须年满16岁'));
            }
            else if(value>120)
            {
                this.ustatus=false;
                callback(new Error('年龄应小于120岁'));
            } else {
                this.ustatus=true;
              callback();
            }
          }
        }, 1000);
      };
      var validateName = (rule, value, callback) => {
        if (value === '') {
            this.ustatus=false;
          callback(new Error('请输入用户名'));
        } else {
          if (this.ruleForm.uname.length<3||this.ruleForm.uname.length>12) {
            this.ustatus=false;
            callback(new Error('请输入3-12个字符的用户名'));
          }
          else{
               this.ustatus=true;
               callback();
          }
          
        }
      };
       var validateEmail = (rule, value, callback) => {
        if (value === '') {
            this.ustatus=false;
          callback(new Error('请输入邮箱'));
        } 
         else {
          const reg1 = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/
          console.log(reg1.test(value));
          if (reg1.test(value)) {
              this.ustatus=true;
            callback();
          } else {
              this.ustatus=false;
            return callback(new Error('请输入正确的邮箱'));
          }
        }
      };
     var validatePass = (rule, value, callback) => {
        if (value === '') {
            this.ustatus=false;
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.upass.length<6||this.ruleForm.upass.length>16) {
             this.status=false;
             callback(new Error('请输入6-16个字符的密码'));
          }
          else{
               this.ustatus=true;
            callback();
          }
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
            this.ustatus=false;
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.upass) {
            this.ustatus=false;
          callback(new Error('两次输入密码不一致!'));
        } else {
            this.ustatus=true;
          callback();
        }
      };
      var checkPhone = (rule, value, callback) => {
        if (!value) {
            this.ustatus=false;
          return callback(new Error('手机号不能为空'))
          
        } else {
          const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
          console.log(reg.test(value));
          if (reg.test(value)) {
              this.ustatus=true;
            callback();
          } else {
              this.ustatus=false;
            return callback(new Error('请输入正确的手机号'));
          }
        }
      };
    return {
         imageUrl: '',
          ustatus:false,
          usex: '',
          urole:"",
          param:"",
          userinfo:"",
          jieguo:"",
          xianshi:true,
          hidd:false,
         ruleForm: {
          uname: '',
          upass: '',
          checkuPass: '',
          uage:"",
          uemail:"",
          uphone: ''
         
        },
         options: [{
          usex: '1',
          label: '女'
        }, {
          usex: '2',
          label: '男'
        }],
         options1: [{
          urole: '1',
          label: '普通用户'
        }, {
          urole: '2',
          label: '众筹商家'
        }],
        rules:{
             uname: [
            { required: true, validator: validateName, trigger: 'blur' }
          ],
          upass: [
            { required: true,validator: validatePass, trigger: 'blur' }
          ],
          checkuPass: [
            { required: true,validator: validatePass2, trigger: 'blur' }
          ],
          uage: [
            {  required: true,validator: checkAge, trigger: 'blur' }
          ],
          uemail:[{ required: true, validator:validateEmail, trigger: 'blur'}],
      uphone: [
            {required: true,validator: checkPhone, trigger: 'blur'}
          ]

        }
      };
    
},
mounted () {
    
},
methods: {
  llog()
  {
    this.$router.push("/login");
  },
    index()
    {
      this.$router.push("/");
    },
      handleAvatarSuccess(res, file) {
        // console.log(file.raw)
        // this.param = new FormData();
        // this.param.append('file', file.raw, file.raw.name);
      },
       repwd()
        {
            this.hidd=!this.hidd;
        },
        read()
        {
          this.$router.push("/read");
        },
      // beforeAvatarUpload(file) {
      //   // var windowURL = window.URL || window.webkitURL;
                
      //           // this.imageUrl=windowURL.createObjectURL(file);
      //           //重新写一个表单上传的方法
      //           this.param = new FormData();
      //           this.param.append('file', file, file.name);
      //           console.log(this);
      //   const isJPG = file.type === 'image/jpeg';
      //   const isLt2M = file.size / 1024 / 1024 < 2;

      //   if (!isJPG) {
      //       this.ustatus=false;
      //     this.$message.error('上传头像图片只能是 JPG 格式!');
      //   }
      //   if (!isLt2M) {
      //       this.ustatus=false;
      //     this.$message.error('上传头像图片大小不能超过 2MB!');
      //   }
      //   return isJPG && isLt2M;
      // }, 
       rres()
    {
       if(this.hidd)
           {
             
             this.xianshi=true;
           }
           else{
             this.xianshi=false;
           }
  if(!this.xianshi)
           {
             this.jieguo="请同意阅读协议"
           }
        let status=(this.ruleForm.upass&&this.ruleForm.checkuPass&&this.ruleForm.uname&&this.ruleForm.uemail&&this.ruleForm.uphone&&this.ruleForm.uage&&this.usex&&this.ustatus&&this.hidd);
        console.log("status",status)
    if(status)
    {
      console.log(this.imageUrl)
      
      // this.param=new FormData();
      //   this.param.append("u_name",this.ruleForm.uname); 
      //  this.param.append("u_email",this.ruleForm.uemail);
      //          this.param.append("u_sex",this.usex);
      //   this.param.append("u_password",this.ruleForm.upass);
      //   // param.append("u_name",this.imageUrl);
      //   this.param.append("u_number",this.ruleForm.uphone);
      //   this.param.append("u_age",this.ruleForm.uage);
      //   this.param.append("u_role",this.u_role);
      //   console.log(this.param)
        let para={
                u_name:this.ruleForm.uname,
                u_email:this.ruleForm.uemail,
                u_sex:this.usex,
                u_password:this.ruleForm.upass,
                // u_img:this.imageUrl,
                u_number:this.ruleForm.uphone,
                u_age:this.ruleForm.uage,
                // u_role:this.urole
        }
      this.$axios.post("http://127.0.0.1:8081/client/res",para).then(res=>
      {
         if(res.data.status==1)
         {
             this.$router.push("/login");
         }
         else{
           this.xianshi=false;
          this.jieguo=res.data.msg;
          
         
         }
      })
    }
    // console.log(this.imageUrl,this.ruleForm.uname,this.ruleForm.upass,this.ruleForm.uemail,this.ruleForm.uphone,this.ruleForm.uage,this.usex,this.urole)
        console.log(this.ustatus)
        
        console.log("注册啊");
    }
    },
   
     
    
}
</script>

<style>

.res_warp{
        background: #f5f5f5;
    color: #757575;
        padding: 43px 0;
}
.res_con{
    background: #fff;
    width: 854px;
    height: auto;
    margin: 0 auto;
}
.rheads
{
    text-align: center;
    position: relative;
}
.rheads .rlogo{
    width: 48px;
    height: 48px;
    margin: 0 auto;
    background:  #ff6700;
    color: #fff;
    text-align: center;
    line-height: 48px;
    font-size: 28px;
    font-weight: bold;
    border-radius:5px 
}
.rheads h4{
    font-size: 30px;
    color: #424242;
    font-weight: normal;
    padding: 22px 0;
}
.avatar-uploader{
  position: absolute;
  left:65px;
  top:270px;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .resbtn button{
    border: none;
    border:1px #eee solid;
    background: #ff6700;
    color: #fff;
    height: 50px;
    line-height: 50px;
    text-align: center;
    width: 350px;
    font-size: 20px;
    letter-spacing: 20px;
    font-weight: bold;
    margin: 10px 0 10px;
}
 .sun{
     position: absolute;
     right: 0;
     top:0;
     /* width: 100%; */
 }
 .el-form-item{
   width: 350px;
   margin: 20px auto;
 }
 .remeber1{
     width: 350px;
     margin: 0 auto;
     text-align: left
 }
 .remeber1 label {
  position: relative;
  cursor: pointer;
}
 .remeber1 label input:checked + .show-box {
    background: #ec6337;
  }
   .remeber1 label input {
    cursor: pointer;
  }
.remeber1 span{
    display: block;
    width: 300px;
    font-size: 14px;
    position: absolute;
    top:0;
    left:28px;
}
.remeber1 span:hover{
  text-decoration: underline;
}
.remeber1 span i{
color: #ff6700
}


  .show-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: 2px;
    border: 1px solid #d8d8d8;
    background:#ff6700;  }
    .gou { 
         /* 使用了 absolute 所以无所谓是 before 还是 after */
      content: '';
      /* 空白内容占位，当做盒模型处理，见下面 */
      position: absolute;
      top: 3px;
      left: 7px;
      width: 4px;
        /* 勾的短边 */
      height: 10px; 
      /* 勾的长边 */
      border: solid white; 
      /* 勾的颜色 */
      border-width: 0 2px 2px 0; 
       /* 勾的宽度 */
      transform: rotate(45deg); 
       /* 定制宽高加上旋转可以伪装内部的白色勾 */
    }
    .jieguo{
    position: absolute;
    height: 30px;
    text-align: center;
    line-height: 30px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    color: #fff;
    top:50%;
left: 50%;
width: 150px;
margin-left: -75px;
margin-top: -118px;
}
.nnn i:hover{
  color: #ff6700
}
a,input,button{
outline:none;
}
</style>
